 <!-- 用户个人信息 -->
 <template>
  <div>
    <el-card>
      <el-button type="primary" :loading="printLoading" v-print="printObj">打印</el-button>
    </el-card>
    <div class="userDetial" id="userInfoBox">
      <div class="title">
        <h5>员工信息</h5>
      </div>
      <!-- 头部表格 -->
      <div class="head">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{userInfo.username}}</el-descriptions-item>
          <el-descriptions-item label="性别">{{userInfo.sex}}</el-descriptions-item>

          <el-descriptions-item label="名族">{{userInfo.username}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>

          <el-descriptions-item label="居住地">{{userInfo.username}}</el-descriptions-item>
          <el-descriptions-item label="入职时间">{{userInfo.username}}</el-descriptions-item>

          <el-descriptions-item label="备注" :span="2">
            <el-tag
              size="small"
              class="remark"
              :type="item.remark=='admin'?'success':'info'"
              v-for="item in userInfo.roles"
              :key="item.id"
            >{{item.name}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">{{userInfo.username}}</el-descriptions-item>
        </el-descriptions>
        <div class="avatar">
          <img :src="userInfo.avatar" alt />
        </div>
      </div>
      <!-- 底部表格 -->
      <div class="footer">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="经历">
            <div>fas</div>
          </el-descriptions-item>
          <el-descriptions-item label="专业">Suzhou</el-descriptions-item>
          <el-descriptions-item label="P荣耀">Suzhou</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
 
 <script setup>
import { getUserInfoById } from '@/api/user'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = new useRoute()
const userInfo = ref({})
const getUserInfo = async () => {
 
  const { data } = await getUserInfoById(route.params.id)
  userInfo.value = data
}
getUserInfo()

// 打印相关
const printLoading = ref(false)
const printObj = {
  // 打印区域
  id: 'userInfoBox',
  // 打印标题
  popTitle: 'imooc-vue-element-admin',
  // 打印前
  beforeOpenCallback(vue) {
    printLoading.value = true
  },
  // 执行打印
  openCallback(vue) {
    printLoading.value = false
  },
}
</script>
 <style lang='less' scoped>
.title {
  h5 {
    text-align: center;
  }
}
.userDetial {
  padding: 50px 30px 0px 30px;
}
.remark {
  margin-right: 5px;
}
.head {
  display: flex;
  width: 80%;
  margin: auto;
  .avatar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebeef5;
    img {
      width: 180px;
      height: 180px;
    }
  }
  ::v-deep .el-descriptions {
    flex: 4;
  }
}
.footer {
  width: 80%;
  margin: auto;
}
</style>